<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="月份：" prop="date">
        <DatePicker
          v-model="searchForm.date"
          placeholder="请选择月份"
          placement="bottom-start"
          style="width: 200px"
          type="month"
        ></DatePicker>
      </Form-item>
      <Form-item label="线路：" prop="line">
        <Select v-model="searchForm.line" clearable placeholder="请选择线路" style="width:200px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="getDataList()">搜索</Button>
        <Button @click="handleReset()">重置</Button>
      </Form-item>
    </Form>

    <vxe-toolbar>
      <template v-slot:buttons>
        <Button
          :disabled="exportBtnDisable"
          icon="md-cloud-download"
          type="primary"
          @click="exportLineAccounting"
        >导出
        </Button>
        <vxe-button size="medium" status="success" @click="saveEvent">保存备注</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-grid
      ref="xTable"
      :columns="columns"
      :data="data"
      :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
      :footer-cell-class-name="footerCellClassName2"
      :footer-method="footerMethod"
      :loading="listLoading"
      border
      height="650"
      highlight-cell
      keep-source
      show-footer
      show-overflow
      size="mini"
    ></vxe-grid>
  </Card>
</template>
<script>
import {lineAccounting, updateLineNote} from '../../api/lineAccounting'
import XEUtils from 'xe-utils'
import moment from 'moment'

export default {
  data() {
    return {
      searchForm: {
        line: '-1',
      },
      exportBtnDisable: true,
      columns: [
        {type: 'seq', width: 60, align: 'center', fixed: 'left'},
        {
          title: '线路',
          field: 'line',
          width: 100,
          align: 'center',
          fixed: 'left',
          sortable: true
        },
        {
          title: '车公里',
          field: 'monthly_km',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '趟次',
          field: 'num',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '含税实际主营收入',
          field: 'business_income',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '入账主营收入',
          field: 'bookedIncome',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '成本项目',
          align: 'center',
          children: [
            {
              title: '工资',
              field: 'salary',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '充电',
              field: 'total_trading_power',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '气耗',
              field: 'monthly_cost',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '逸华加气',
              field: 'm_air_yihua',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '修理费',
              field: 'repair',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '轮胎',
              field: 'tire',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '保险费',
              field: 'premium',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '费用',
              field: 'cost',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '折旧',
              field: 'depreciation',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '洗车、例检',
              field: 'check',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '五险',
              field: 'insurance',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '其他',
              field: 'other',
              width: 100,
              align: 'center',
              sortable: true
            },
            {
              title: '小计',
              field: 'subtotal',
              width: 100,
              align: 'center',
              sortable: true
            }
          ]
        },
        {
          title: '营业税金及附加',
          field: 'taxes',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '实际主营利润',
          field: 'profits',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '盈利亏损排列',
          field: 'rank',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '备注',
          field: 'note',
          width: 200,
          align: 'left',
          showOverflow: true,
          editRender: {name: 'input'}
        }
      ],
      data: [],
      lines: [],
      listLoading: false,
    }
  },
  mounted() {
    this.init()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    footerMethod({columns, data}) {
      const sums = []
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('合计')
        } else {
          let sumCell = null
          switch (column.property) {
            case 'monthly_km':
            case 'num':
            case 'business_income':
            case 'bookedIncome':
            case 'salary':
            case 'total_trading_power':
            case 'monthly_cost':
            case 'm_air_yihua':
            case 'repair':
            case 'tire':
            case 'premium':
            case 'cost':
            case 'depreciation':
            case 'check':
            case 'insurance':
            case 'other':
            case 'subtotal':
            case 'taxes':
            case 'profits':
              sumCell = XEUtils.sum(data, column.property)
              break
            case 'line':
            case 'rank':
            case 'note':
              sumCell = '-'
              break
          }
          sums.push(sumCell)
        }
      })
      // 返回一个二维数组的表尾合计
      return [sums]
    },
    footerCellClassName2({$rowIndex, column, columnIndex}) {
      if ($rowIndex === 0) {
        return 'col-gray'
      }
    },
    changePage(v) {
      this.getDataList()
    },
    //导出
    exportLineAccounting() {
      const line = this.searchForm.line
      const date = this.searchForm.date
      const start_date = moment(date).format('YYYY-MM-DD')
      window.location.href =
        '/api/exportLineAccounting?line=' +
        line +
        '&date=' +
        start_date
    },
    getDataList() {
      this.listLoading = true
      lineAccounting(this.searchForm).then(res => {
        this.listLoading = false
        this.data = res.data.result
        this.searchForm.date = res.data.date
        if ((res.data.result).length > 0) {
          this.exportBtnDisable = false
        }
      })
    },
    handleReset() {
      this.searchForm = {
        line: '-1',
      }
    },
    handleSearch() {
    },
    init() {
      this.getDataList()
    },
    saveEvent() {
      const updateRecords = this.$refs.xTable.getUpdateRecords()
      if (updateRecords.length === 0) {
        this.$message.info('未编辑数据')
      } else {
        this.listLoading = true
        updateLineNote({updateRecords: updateRecords, date: this.searchForm.date}).then(res => {
          if (res.data) {
            this.$Message.success(res.message)
            this.getDataList()
          } else {
            this.$Message.error(res.message)
          }
        })
      }
    },
  }
}
</script>
